<template>
	<div>
	<el-row class="panel">
		<el-col :span="24" class="panel-top">
			<el-col :span="20" style="font-size:26px;">
				<div style="float:left">
				<img src="../assets/logo4.png" class="logo"> <span>台鼎CRM</span></div>
				<div id="nav" style="float: left;margin-left: 105px;">
					<ul>
						<li v-for="(item,index) in Modules" :class="{ selected: ModuleID==item.FID }" @click="ModuleID=item.FID">
							<a href="#"><span>{{item.FName}}</span></a>
						</li>
					</ul>
				</div>

			</el-col>
			<el-col :span="4" class="rightbar">
				<el-dropdown trigger="click">
					<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img src="../assets/qq.jpg" class="head"> {{sysUserName}}
</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="modifyUser">修改个人资料</el-dropdown-item>
							<el-dropdown-item @click.native="modifyPsw">修改密码</el-dropdown-item>
							<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<el-badge :value="messageCount" style="line-height:25px;margin-left: 10px;">
						<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;">
							<a href="javascript:;" @click="viewMain">
								<img src="../assets/messages.png" class="head" style='margin: 0'>
							</a>
</span>
					</el-badge>
				</el-col>
			</el-col>
			<el-col :span="24" class="panel-center">
				<!--<el-col :span="4">-->
				<aside class="panel-left" v-show="showAside">
					<el-menu class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
							 theme="light" unique-opened router>
						<template v-for="(item,index) in getRoutes()" v-if="item.show && !item.hidden">
							<el-submenu :index="index+''">
								<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
								<el-menu-item v-for="child in item.children" :index="joinPath(child)" v-if="child.show && !child.hidden">{{child.name}}</el-menu-item>
							</el-submenu>
						</template>
					</el-menu>
				</aside>

            <div class="dislpayArrow" :class="arrowLeft">
                <a class="pngfix" :class="arrowOpen" href="javascript:void(0);" @click="displaynavbar">
                </a>
            </div>

			<!--</el-col>-->
			<!--<el-col :span="20" class="panel-c-c">-->
			<section class="panel-c-c" :class="centerCss">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" style="margin-bottom:5px;">
						<strong style="width:200px;float:left;color: #475669;">{{$route.name}}</strong>
						<el-breadcrumb separator="/" style="float:right;">
							<el-breadcrumb-item v-for="item in $route.matched">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
						<!--<transition name="fade">-->
						<router-view></router-view>
						<!--</transition>-->
					</el-col>
				</div>
			</section>
			<!--</el-col>-->
		</el-col>
	</el-row>

	<el-dialog top="5%" size="tiny" title="修改密码" v-model="vPsw" :close-on-click-modal="false">
		<el-form :model="formPsw"  :rules="rulesPsw" label-width="0px">
			<el-form-item prop="psw1">
				<el-input  v-model="formPsw.psw1"  placeholder="新密码"></el-input>
			</el-form-item>
			<el-form-item prop="psw2">
				<el-input  v-model="formPsw.psw2" placeholder="确认密码"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click.native="vPsw = false">取 消</el-button>
			<el-button type="primary" @click="savePsw" :loading="loginingPsw">保存</el-button>
		</div>
	</el-dialog>

	<UserEdit ref="userEdit" @onSaveSuc="userEditSaveSuc" homeEdit>
	</UserEdit>
	</div>
</template>

<script>
    import util from '../common/util'
    import UserEdit from './system/User_Edit.vue'
	export default {
        components:{
            UserEdit:UserEdit
		},
		data() {
			return {
			    ModuleID:0,
				Modules:[],
				sysUserName: '',
				sysUserAvatar: '',
                showAside:true,
                centerCss:"c-left-230",
                arrowOpen:"",
                arrowLeft:"",
                vPsw:false,
                loginingPsw:false,
                formPsw:{},
                rulesPsw: {
                    psw1: [{ required: true, message: '请输入密码', trigger: 'change' }],
                    psw2: [{ required: true, message: '请输入密码', trigger: 'change' }]
                },
				messageCount:0
            }
        },
        methods: {
            userEditSaveSuc(form){
                global.user = form
			},
		    joinPath(menu){
		        if(menu.query){
                    return menu.path + "?" + menu.query
				}else{
                    return  menu.path
				}
			},
			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
				//console.log('handleopen');
			},
			handleclose() {
				//console.log('handleclose');
			},
			handleselect: function (a, b) {
			},
            modifyPsw(){
			    this.vPsw = true
			},
            modifyUser(){
                this.$refs.userEdit._openEdit(global.user)
			},
            savePsw(){
                if(!this.formPsw.psw1){
                    util.msgWarning("密码不能为空")
                    return
                }
                if(this.formPsw.psw1!=this.formPsw.psw2){
                    util.msgWarning("密码不一致")
					return
				}
                util.post("server/system/User.ashx?cmd=ModifyPsw",{FPassWord:this.formPsw.psw1},null,result=> {
                    util.msgSuc("保存成功")
                    this.vPsw = false
                })
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
                    global.user = null;
                    //global.allRoutes = null;
					_this.$router.push('/login');
				}).catch(() => {

				});
			},
            displaynavbar(){
                this.showAside = !this.showAside
                this.centerCss = this.centerCss=="c-left-230"?"c-left-0":"c-left-230"
                this.arrowOpen = this.arrowOpen==""?"open":""
                this.arrowLeft = this.arrowLeft==""?"arrowLeft":""
            },
            getRoutes(){
                return global.allRoutes.filter((item,i)=>{
                        return  item.moduleID==this.ModuleID
				 })
			},
			initModule(){
                this.Modules= global.Module.filter((item,i)=> {
                       for(let route of global.allRoutes)
					   {
					       if(item.FID==route.moduleID && route.show){
					           return true
						   }
					   }
					   return false
                   })
				if(this.Modules.length>0){
                    this.ModuleID = this.Modules[0].FID;
				}
			},
            viewMain(){
                this.$router.push({path: '/Main'});
            },
            getMessageCount(){
                util.get("server/system/Message.ashx?cmd=GetCount",
                    null, null, result => {
                        this.messageCount = result.count
                    })
            }
		},
		created(){
            this.initModule()
		},
		mounted() {
			var user = global.user
			if (user) {
				this.sysUserName = user.FName || '';
				this.sysUserAvatar = "https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png";
			}
            this.getMessageCount()
            global.bus.$on('RefreshMsgCount',this.getMessageCount)
		}
	}

</script>

<style scoped>
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s
	}
	
	.fade-enter,
	.fade-leave-active {
		opacity: 0
	}
	
	.panel {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
	}

    .panel-left{
        width:230px;
        height:100%;
        overflow:auto
    }
	
	.panel-top {
		height: 60px;
		line-height: 60px;
		/*background: #1F2D3D;*/
		background: #467a9e;
		color: #c0ccda;
	}
	
	.panel-top .rightbar {
		text-align: right;
		padding-right: 35px;
	}
	
	.panel-top .rightbar .head {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		margin: 10px 0px 10px 10px;
		float: right;
	}
	
	.panel-center {
		background: #FFFFFF;
		position: absolute;
		top: 60px;
		bottom: 0px;
		overflow: hidden;
	}
	
	.panel-c-c {
	    border-left:3px solid #467a9e;
		background: #f1f2f7;
		position: absolute;
		right: 0px;
		top: 0px;
		bottom: 0px;
		overflow-y: scroll;
		padding: 5px 10px;
	}

    .c-left-230{
        left: 230px;
    }

    .c-left-0{
        left: 0px;
    }
	
	.logout {
		background: url(../assets/logout_36.png);
		background-size: contain;
		width: 20px;
		height: 20px;
		float: left;
	}
	
	.logo {
		width: 40px;
		float: left;
		margin: 10px 10px 10px 18px;
	}
	
	.tip-logout {
		float: right;
		margin-right: 20px;
		padding-top: 5px;
	}
	
	.tip-logout i {
		cursor: pointer;
	}
	
	.admin {
		color: #c0ccda;
		text-align: center;
	}

    .dislpayArrow {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 230px;
        width: 0px;
        height: 100%;
        z-index: 10;
        transition: all 0.2s ease 0s;
    }

    .arrowLeft{
        left: 0px;
    }

    .dislpayArrow a {
        background: url(../assets/icon_arrow.png) no-repeat 0 0;
        position: absolute;
        display: block;
        width: 17px;
        height: 61px;
        top: 50%;
        margin-top: -30px;
        outline: none;
    }
    .dislpayArrow a:hover {
        text-decoration: none;
        background-position: right 0;
    }
    .dislpayArrow a.open {
        background-position: 0 -61px;
    }
    .dislpayArrow a.open:hover {
        background-position: right -61px;
    }
	#nav ul{zoom:1;overflow:hidden;list-style:none;margin:0;padding:0;background:none;}
	#nav li{float:left;width:100px;height:60px;line-height:60px;text-align:center;}
	#nav a{color:#c0ccda; text-decoration: none;}
	#nav a:hover{display:block;background:#333;color:#CCC;}
	#nav span{font-size: 16px;}
	.selected{display:block;background:#829dbf;color:#CCC;}
</style>